<template>
	<view class="picker-wrapper"  v-if="visible">
		<view class="picker-box">
			<view class="picker-body">
				<picker-view  :indicator-style="indicatorStyle"  indicator-class="indicatorClass" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item.value}} 时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutes" :key="index">{{item.value}} 分</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in seconds" :key="index">{{item.value}} 秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="picker-footer">
				<view class="picker-cancel" @click="cancelPicker">取消</view>
				<view class="picker-confirm defaultColor" @click="confirmPicker">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloneDeep from 'lodash/cloneDeep'
	import findIndex from 'lodash/findIndex'
	const date = new Date();
	export default {
		props:{
			beginDate:{
				type:String,
				default:''
			},
			endDate:{
				type:String,
				default:''
			},
			defaultValue:{
				type:String,
				default(){
					let hours = date.getHours();
					let minutes = date.getMinutes();
					let seconds = date.getSeconds();

					return `${hours}:${minutes}:${seconds}`;
				}
			}
		},
		data: function() {
			const hours = []
			const minutes = []
			const seconds = []
			return {
				title: 'picker-view',
				hours,
				minutes,
				seconds,
				value: [0,0,0],
				visible: false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			}
		},
		computed: {

		},
		created() {
			this._pickerDataSource();
		},
		mounted() {
			this._initPicker();
			// console.log('this.getMonthDays(2020,2):',this.getMonthDays(2020,2));
		},
		watch: {
			seconds(newValue, oldValue) {
				this.seconds = newValue;
			},
			minutes(newValue,oldValue){
				this.minutes = newValue;
			},
			hours(newValue,oldValue){
				this.hours = newValue;
			},
			value(newValue,oldValue){
				this.value = newValue;
			},
			defaultValue(newValue,oldValue){
				this._initPicker();
			}

		},
		methods: {
			bindChange: function(e) {
				let curValue = cloneDeep(e.detail.value);

				this.value = curValue;
			},
			cancelPicker:function(e){
				this.hiddenPicker();
			},
			confirmPicker:function(e){
				this.$emit('betterChange',{
					value:this.value,
					betterValue:`${this.hours[this.value[0]].value}:${this.minutes[this.value[1]].value}:${this.seconds[this.value[2]].value}`
				});
				this.hiddenPicker();
			},
			showPicker(){
				this.visible = true;
			},
			hiddenPicker(){
				this.visible = false;
			},
			_initPicker(){
				console.log('this.defaultValue',this.defaultValue);
				if(this.defaultValue){
					if(this.defaultValue.indexOf(':') > -1){
						let arrs = this.defaultValue.split(':');
						if(arrs&&arrs.length>0){
							let hoursInd = findIndex(this.hours,o=>(o.id == arrs[0] || o.value == arrs[0]));
							let minutesInd = findIndex(this.minutes,o=>(o.id == arrs[1] || o.value == arrs[0]));
							let secondsInd = findIndex(this.seconds,o=>(o.id == arrs[2] || o.value == arrs[0]));
							this.value = [hoursInd,minutesInd,secondsInd];
						}
					}
				}
			},
			_pickerDataSource(){
				let arrs = [];
				for(let i= 0;i< 24;i++){
					this.hours.push({
						id:i,
						value:i > 9 ? `${i}` : `0${i}`
					});
				};
				for(let i = 0;i<= 59;i++){
					this.minutes.push({
						id:i,
						value:i > 9 ? `${i}` : `0${i}`
					})
					this.seconds.push({
						id:i,
						value:i > 9 ? `${i}` : `0${i}`
					});
				}

			},
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top:20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
	.indicatorClass{
		border-top: 4upx solid #0077AA;
	}
	.picker-wrapper{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color: rgba(0,0,0,.4);
		z-index: 9999;
		.picker-box{
			width:80%;
			background-color: #FFFFFF;
			border-radius:5px;
			margin: 30% auto 0;
			position: relative;
			overflow: hidden;
			.picker-footer{
				display: flex;
				flex-direction: row;
				border-top: 2upx solid #DDDDDD;
				.picker-cancel,.picker-confirm{
					width: 50%;
					text-align: center;
					padding: 20upx 0;
					color: #000000;
					box-sizing: border-box;
					&:active{
						background-color: rgba(0,0,0,.2);
					}
				}
				.defaultColor{
					color: #4151AA !important;
				}
				.picker-cancel{
					border-right: 2upx solid #DDDDDD;
				}
				.picker-confirm{}
			}
		}
	}

</style>
